import $ from '../jquery-3.4.1.min.js';
import ajax from '../utils/ajax'


// 筛选条件
const searchData = { value: '' };
// 显示页数
const pageData = {
    currentPage: 1,  //当前页数
    pageSize: 3,      //每页显示条数
    total: 0,    //总条数
    pages: 0     //总页数
}


// 添加车位
$('#addParking-space').hide();//添加车位模态框默认隐藏
$('#Parking-space .Parking-space-nav span').click(function () {
    const spanText = $(this).text();
    // console.log(spanText);
    if (spanText == '添加') {
        
        
        $('#main-right').children().hide();
        $('#addParking-space').show();
    }
})

getParkingSpaceCommunity()
function getParkingSpaceCommunity(){
    ajax({
        url: '/community',
        type: 'GET',
        data: {
            value: searchData.value
        },
        success(res) {
            defaultSelect(res.result);
        }

    })
}


function defaultSelect(data) {
    const html = data.map(item => (
        `
        <option value="${item._id}">${item.communityName}</option>
        `
    )).join('');
    $('#addParking-space .communityText').html(html);
    $('#building #buildingCommunity').html(html);
    $('#addOwner  .ownerCommunity').html(html)

}

// 添加/修改车位
$('#addParking-space .save').click(function () {
    let title=$('#addParking-space h3').text();
    if(title=='添加车位'){
        const community_id = $('#addParking-space .communityText').val();
        const carportNumber = $('#addParking-space .carportNumberText').val();
        const parkingSpaceArea = $('#addParking-space .parkingSpaceAreaText').val();
        const parkingSpaceType = $('#addParking-space .parkingSpaceTypeText').val();
        const parkingSpaceState = $('#addParking-space .parkingSpaceStateText').val();
        // console.log(community,
        //     carportNumber,
        //     parkingSpaceArea,
        //     parkingSpaceType,
        //     parkingSpaceState);
        ajax({
            url: '/parkingSpace',
            type: 'POST',
            data: {
                community_id,
                carportNumber,
                parkingSpaceArea,
                parkingSpaceType,
                parkingSpaceState
            },
            success(res) {
                getParkingSpace()
            }
        })
    }else if(title=='修改车位'){
        const _id = $('#addParking-space .Parking-space-Id').val();
        const community_id = $('#addParking-space .communityText').val();
        const carportNumber = $('#addParking-space .carportNumberText').val();
        const parkingSpaceArea = $('#addParking-space .parkingSpaceAreaText').val();
        const parkingSpaceType = $('#addParking-space .parkingSpaceTypeText').val();
        const parkingSpaceState = $('#addParking-space .parkingSpaceStateText').val();
        $('#addParking-space h3').text('添加车位');
        ajax({
            url: '/parkingSpace',
            type: 'PUT',
            data: {
                _id,
                community_id,
                carportNumber,
                parkingSpaceArea,
                parkingSpaceType,
                parkingSpaceState
            },
            success(res) {
                // console.log(res);
                getParkingSpace()
            }
        })
    }
    
})


// 点击车位管理时默认渲染一次页面
getParkingSpace()

function getParkingSpace() {

    ajax({
        url: '/parkingSpace',
        type: 'GET',
        data: {
            value: searchData.value,
            currentPage: pageData.currentPage,
            pageSize: pageData.pageSize
        },
        success(res) {
            // console.log(res);
            pageData.total = res.data.total;//总条数
            pageData.pages = res.data.pages;//总页数

            defaultParkingSpace(res.data.result)
            defaultPage()
        }
    })
}

function defaultParkingSpace(data) {
    const html = data.map(item => (
        `<tr>
        <td><input type="text"></td>
        <td>${item.carportNumber}</td>
        <td>${item.community_id.communityName}</td>
        <td>${item.parkingSpaceType}</td>
        <td>${item.parkingSpaceState}</td>
        <td>${item.parkingSpaceArea}m²</td>
        <td>2</td>
        <td>￥400/月</td>
        <td>
            <span>详情</span>
            <span>绑定住户</span>
            <span>绑定车辆</span>
            <span>添加收费标准</span>
            <span data-id="${item._id}">编辑</span>
            <span data-id="${item._id}">删除</span>
        </td>
    </tr>`
    )).join('');
    $('#Parking-space table tbody').html(html);


}


function defaultPage() {
    if (pageData.pages > 0) {
        let j = 1;
        let pagesNumber = '';
        for (let i = 0; i < pageData.pages; i++) {
            pagesNumber = pagesNumber + `<span class="item${j}">${j++}</span>`;
        }
        const html = `<span class="previousPage">
            < </span>
            ${pagesNumber}
            <span class="nextPage">></span>
            <select name="" class="number">
                <option value="3">3条/页</option>
                <option value="5">5条/页</option>
                <option value="7">7条/页</option>
                <option value="9">9条/页</option>
            </select>
            <span>跳至<input type="text" value="" class="totalPages">页</span>`

        $('#Parking-space .page-number').html(html);
        // 当前页span背景色改变
        $('#Parking-space .page-number span').css({
            'background-color': 'white',
            'color': 'black'
        })
        $(`#Parking-space .page-number .item${pageData.currentPage}`).css({
            'background-color': 'rgb(123, 123, 219)',
            'color': 'white'
        })
        $(`#Parking-space .page-number .number`).val(pageData.pageSize)

    }
}

// 翻页
$('#Parking-space .page-number').on('click', '.nextPage', function () {
    if (pageData.currentPage<pageData.pages) {
        pageData.currentPage++;
        getParkingSpace()
    }
})
$('#Parking-space .page-number').on('click', '.previousPage', function () {
    if (pageData.currentPage > 1) {
        pageData.currentPage--;
        getParkingSpace()
    }
})
// 每页显示条数
$('#Parking-space .page-number').on('change', ' .number', function () {
    pageData.pageSize = $(this).val();
    pageData.currentPage = 1;
    getParkingSpace()
})
// 点击切换页面
$('#Parking-space .page-number').on('click', 'span', function () {
    const spanText = Number($(this).text());
    if (typeof spanText == "number" && isNaN(spanText) == false) {
        pageData.currentPage = spanText
        getParkingSpace()
    }
})

//输入页码，切换当前页
$('#Parking-space .page-number').on('blur', '.totalPages', function () {
    if ($(this).val() != '') {
        pageData.currentPage = $(this).val();
        getParkingSpace()
    }
})


// 筛选
// 筛选条件
$('#Parking-space .sousuo').click(function () {
    searchData.value = $('#Parking-space .parkingSpaceInput').val();
    pageData.currentPage = 1;
    getParkingSpace()
})

//删除
$('#Parking-space table tbody').on('click', 'span', function () {
    const spanText = $(this).text();
    if (spanText == '删除') {
        const _id = $(this).attr('data-id')
        ajax({
            url: '/parkingSpace',
            type: 'DELETE',
            data: { _id },
            success(res) {
                if (pageData.total - 1 == (pageData.currentPage - 1) * pageData.pageSize) {
                    pageData.currentPage--
                };
                getParkingSpace()
            }
        })
    }
})
// 修改
$('#Parking-space table tbody').on('click', 'span', function () {
    $('#main-right').children().hide();
    $('#addParking-space').show();
    $('#addParking-space h3').text('修改车位');
    const spanText = $(this).text();
    if (spanText == '编辑') {
        const _id = $(this).attr('data-id')
        console.log(_id);
        ajax({
            url: '/parkingSpace/getamendParkingSpace',
            type: 'GET',
            data: { _id },
            success(res) {
                console.log(res.result[0]);
                defaultamendParkingSpace(res.result[0]);
            }
        })
    }
    
})

function defaultamendParkingSpace(data){
    // console.log($('#addParking-space .communityText'));
    $('#addParking-space .Parking-space-Id').val(data._id);
    $('#addParking-space .communityText').val(data.community_id._id);
    $('#addParking-space .carportNumberText').val(data.carportNumber);
    $('#addParking-space .parkingSpaceAreaText').val(data.parkingSpaceArea);
    $('#addParking-space .parkingSpaceTypeText').val(data.parkingSpaceType);
    $('#addParking-space .parkingSpaceStateText').val(data.parkingSpaceState);

}

